<template>
	<view>
		<view class="JSSegmentedControl" scroll-x="trues">
			<view class="JSSegmentedControlItem" v-for="(item, index) in segmentedControlTitles" :key="index" @click="segmentControlDidSelected(index)">
				<view :class="[segmentedControlSelectedIndex == index ? 'JSSegmentedControlItemTitle-selected' : 'JSSegmentedControlItemTitle-normal']">{{item}}</view>
			</view>
		</view>
		<view class="JSSegmentedControl2" scroll-x="trues">
			<view class="JSSegmentedControlItem2" v-for="(item, index) in segmentedControlTitles2" :key="index" @click="segmentControl2DidSelected(index)">
				<view :class="[segmentedControlSelectedIndex2 == index ? 'JSSegmentedControlItemTitle2-selected' : 'JSSegmentedControlItemTitle2-normal']">{{item}}</view>
			</view>
		</view>
		<mescroll-uni class="scroll-view" :top="160" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
		 <view class="item" v-for="(item, index) in dataList" :key="index">
		 	<view class="item-header-view util-font-regular">
		 		<image v-if="item.type == 0 || item.type == 1" class="item-header-image" :src="item.buyImg" mode="aspectFill"></image>
		 		<image v-else-if="item.type == 2" class="item-header-image" :src="item.juniorUserImg" mode="aspectFill"></image>
		 		<image v-else-if="item.type == 3" class="item-header-image" :src="item.bottomUserImg" mode="aspectFill"></image>
				<view v-if="item.type == 0" class="item-header-type">自购订单</view>
				<view v-else-if="item.type == 1" class="item-header-type">粉丝贡献</view>
				<view v-else-if="item.type == 2 || item.type == 3" class="item-header-type">达人贡献</view>
				<view v-if="item.status == 1" class="item-header-status">已入账</view>
				<view v-else class="item-header-status">待入账</view>
		 	</view>
			<view class="item-content-view util-font-regular">
				<image class="item-content-image" :src="item.pic" mode="aspectFill"></image>
				<view class="item-content-title">{{item.name}}</view>
				<view class="item-content-price">
					<view class="item-content-price-value">￥{{item.price/100.0}}</view>
					<view class="item-content-price-number">X{{item.number}}</view>
				</view>
			</view>
			<view class="item-other-view util-font-regular" v-if="item.show">
				<view class="item-other-row">购买人：{{formatString(item.buyName, 1, 0, 2)}}</view>
				<view class="item-other-row">下单时间：{{item.createTime}}</view>
				<view class="item-other-row">订单编号：{{item.orderNo}}</view>
				<view v-if="type == 3" class="item-other-row">收入详情：佣金0.00+平台分红{{(item.amount/100.0).toFixed(2)}}</view>
				<view v-else class="item-other-row">收入详情：佣金{{(item.amount/100.0).toFixed(2)}}+平台分红0.00</view>
			</view>
			<view v-if="item.show" class="item-button-view util-font-regular" @click="hide(index)">
				<image class="item-button-image" src="../../static/workbench/up_button.png" mode="aspectFill"></image>
				<view class="item-button-title">收起</view>
			</view>
			<view v-else class="item-button-view util-font-regular" @click="show(index)">
				<image class="item-button-image" src="../../static/workbench/down_button.png" mode="aspectFill"></image>
				<view class="item-button-title">展开</view>
			</view>
			<view class="item-footer-view util-font-medium">
				<view class="item-footer-price">{{(item.amount/100.0)}}元</view>
				<view class="item-footer-title">预计赚：</view>
			</view>
		 </view>
		 </mescroll-uni>
		
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
		components: {
			MescrollUni,
		},
		data() {
			return {
				segmentedControlTitles: ["全部", "粉丝购买", "直属达人", "间接达人", "自购返佣"],
				segmentedControlSelectedIndex: 0,
				segmentedControlTitles2: ["全部", "待入账", "已到账"],
				segmentedControlSelectedIndex2: 0,
				
				// 列表数据
				mescroll: null, // mescroll的实例化对象
				dataList: [],
				
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0,
						size: 10
					},
					toTop: {
						safearea: true
					},
					noMoreSize: 0, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					// bgColor: '#FF0000'
				},
			}
		},
		onLoad() {
			this.segmentControlDidSelected(0)
		},
		methods: {
			segmentControlDidSelected: function(index) {
				this.segmentedControlSelectedIndex = index
				this.segmentControl2DidSelected(0)
			},
			segmentControl2DidSelected: function(index) {
				this.segmentedControlSelectedIndex2 = index
				this.mescroll.resetUpScroll() // 刷新列表数据
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				console.log("下拉刷新")
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				console.log("上拉加载更多")
				this.loadData()
			},
			
			loadData: function() {
				var that = this
				
				var data = {
					userId: uni.getStorageSync('userInfo').id,
				}
				
				if (that.segmentedControlSelectedIndex == 1) {
					data.type = 1
				}else if (that.segmentedControlSelectedIndex == 2) {
					data.type = 2
				}else if (that.segmentedControlSelectedIndex == 3) {
					data.type = 3
				}else if (that.segmentedControlSelectedIndex == 4) {
					data.type = 0
				}
				
				if (that.segmentedControlSelectedIndex2 == 0) {
					data.status = '0,1'
				}else if (that.segmentedControlSelectedIndex2 == 1) {
					data.status = '0'
				}else if (that.segmentedControlSelectedIndex2 == 2) {
					data.status = '1'
				}
				
				that.sendRequest({
					url: 'app/appBrokerageRecords/rebateOrder',
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					data: data,
					success: function(res){
						console.log(JSON.stringify(res))
						
						let currentPageData = res.data.records
						let totalPage = res.data.pages
						
						if (that.mescroll.num == 1) {
							that.dataList = []
						}
						that.dataList = that.dataList.concat(currentPageData)
									
						that.$nextTick(function() {
							that.mescroll.endByPage(currentPageData.length, totalPage)
						})
						
					}
				})
				
				
				// setTimeout(function(){
				// 	let currentPageData = [0,0,0,0,0,0,0,0,0,0]
				// 	let totalPage = 4
								
					
				// }, 2000)
			
			// 	var that = this
			// 	var data = new Object()
			// 	data.page = that.mescroll.num
			// 	data.limit = that.mescroll.size
			// 	data.userId = uni.getStorageSync('userInfo').id
			// 	data.orderByField = 'create_time'
			// 	data.isAsc = false
			// 	if (that.segmentedControlSelectedIndex == 1) {
			// 		data.status = '0'
			// 	} else if (that.segmentedControlSelectedIndex == 2) {
			// 		data.status = '1'
			// 	} else if (that.segmentedControlSelectedIndex == 3) {
			// 		data.status = '2'
			// 	} else if (that.segmentedControlSelectedIndex == 4) {
			// 		data.status = '3,4'
			// 	}
			
			// 	that.sendRequest({
			// 		url: 'app/ordOrders/page',
			// 		header: that.$urlRequest.getHeader('token'),
			// 		method: 'POST',
			// 		data: data,
			// 		success: function(res) {
			// 			console.log(res)
			
			// 			let currentPageData = res.data.records
			// 			let totalPage = res.data.pages
			
			// 			if (that.mescroll.num == 1) {
			// 				that.dataList = []
			// 			}
			// 			that.dataList = that.dataList.concat(currentPageData)
			
			// 			that.$nextTick(function() {
			// 				that.mescroll.endByPage(currentPageData.length, totalPage)
			// 			})
			// 		}
			// 	})
			},
			show: function(index){
				var item = this.dataList[index]
				item.show = true
				this.dataList.splice(index, 1, item)
			},
			hide: function(index){
				var item = this.dataList[index]
				item.show = false
				this.dataList.splice(index, 1, item)
			},
			formatString: function(string, number1, number2, number3) {
				let newString = string + ''
				let firstNumber = number1?number1:0
				let lastNumber = number2?number2:0
				let middleNumber = number3?number3:0
				if (newString.length == 0) {
					return '**'
				}
				let firstString = newString.slice(0, firstNumber)
				let lastString = newString.slice(newString.length-lastNumber, newString.length)
				var middleString = ''
				if (middleNumber == 0) {
					for (var i = 0; i < newString.length-firstNumber-lastNumber; i++) {
						middleString = middleString + '*'
					}
				}else{
					for (var i = 0; i < middleNumber; i++) {
						middleString = middleString + '*'
					}
				}
				return firstString + middleString + lastString
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	.JSSegmentedControl {
		z-index: 9999;
		position: fixed;
		/* css变量 */
		top: 0;
		left: 0;
		width: 100%;
		height: 90upx;
		background-color: white;
		border-bottom: 2rpx solid #f1f1f1;
		display: flex;
		justify-content: space-around;
	}
	
	.JSSegmentedControl ::-webkit-scrollbar {
	   width: 0;
	   height: 0;
	   color: transparent;
	}
	
	.JSSegmentedControlItem {
		display: inline-block;
		height: 90upx;
		text-align: center;
		white-space: nowrap;
	}
	
	.JSSegmentedControlItemTitle-normal {
		font-size: 30upx;
		font-family: 'PingFangSC-Regular';
		color: #333333;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		padding: 10rpx 0;
		margin-top: 20rpx;
		border-bottom: 10rpx solid #FFFFFF;
	}
	
	.JSSegmentedControlItemTitle-selected {
		font-size: 32upx;
		font-family: 'PingFangSC-Medium';
		color: #F19216;
		height: 40rpx;
		display: inline-block;
		line-height: 40rpx;
		padding: 10rpx 0;
		margin-top: 20rpx;
		border-bottom: 10rpx solid #F19216;
	}
	
	.JSSegmentedControl2 {
		z-index: 9998;
		position: fixed;
		/* css变量 */
		top: 90rpx;
		left: 0;
		width: 100%;
		height: 70upx;
		background-color: white;
		display: flex;
		justify-content: space-around;
	}
	
	.JSSegmentedControl2 ::-webkit-scrollbar {
	   width: 0;
	   height: 0;
	   color: transparent;
	}
	
	.JSSegmentedControlItem2 {
		display: inline-block;
		height: 70upx;
		text-align: center;
		white-space: nowrap;
	}
	
	.JSSegmentedControlItemTitle2-normal {
		font-size: 24upx;
		font-family: 'PingFangSC-Regular';
		color: #333333;
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}
	
	.JSSegmentedControlItemTitle2-selected {
		font-size: 24upx;
		font-family: 'PingFangSC-Medium';
		color: #F19216;
		height: 40rpx;
		display: inline-block;
		line-height: 40rpx;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}
	
	
	.item {
		width: 650rpx;
		margin: 20rpx;
		padding: 25rpx 30rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.item-header-view {
		width: 100%;
		height: 52rpx;
	}
	.item-header-image {
		width: 52rpx;
		height: 52rpx;
		overflow: hidden;
		border-radius: 26rpx;
		float: left;
	}
	.item-header-type {
		width: 115rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		color: #db6b21;
		background-color: #ffeedb;
		font-size: 24rpx;
		float: left;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
	.item-header-status {
		height: 52rpx;
		line-height: 52rpx;
		color: #333333;
		float: right;
		font-size: 26rpx;
	}
	
	.item-content-view {
		width: 100%;
		height: 96rpx;
		margin-top: 25rpx;
	}
	.item-content-image {
		width: 120rpx;
		height: 96rpx;
		border-radius: 10rpx;
		overflow: hidden;
		float: left;
	}
	.item-content-title {
		 width: 380rpx;
		 height: 76rpx;
		 line-height: 38rpx;
		 font-size: 26rpx;
		 margin-left: 20rpx;
		 float: left;
		 
		 
		 text-overflow: -o-ellipsis-lastline;
		 overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 line-clamp: 2;
		 -webkit-box-orient: vertical;
	}
	.item-content-price {
		height: 96rpx;
		float: right;
		text-align: right;
	}
	.item-content-price-value {
		color: #333333;
		font-size: 28rpx;
	}
	.item-content-price-number {
		color: #999999;
		font-size: 24rpx;
	}
	
	.item-other-view {
		width: 100%;
		color: #999999;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.item-other-row {
		width: 100%;
		height: 44rpx;
		line-height: 44rpx;
	}
	
	.item-button-view {
		width: 100%;
		height: 45rpx;
		text-align: right;
		border-bottom: 2rpx solid #f1f1f1;
	}
	.item-button-image {
		width: 20rpx;
		height: 20rpx;
		margin-top: 8rpx;
		float: right;
	}
	.item-button-title {
		height: 40rpx;
		line-height: 40rpx;
		float: right;
		color: #999999;
		font-size: 24rpx;
		margin-right: 5rpx;
	}
	
	.item-footer-view {
		width: 100%;
		height: 70rpx;
	}
	.item-footer-price {
		height: 44rpx;
		line-height: 44rpx;
		margin-top: 20rpx;
		float: right;
		font-size: 38rpx;
		color: #cd6938;
	}
	.item-footer-title {
		height: 30rpx;
		line-height: 30rpx;
		margin-top: 30rpx;
		float: right;
		font-size: 28rpx;
		color: #999999;
	}
	
</style>
